<template>
  <bs-container :left="false">
    <template slot="list">
      <div class="use-header">
        <div class="avatar">
           <el-avatar shape="square" class="avatar" :src="avatar ? avatar : '@/assets/images/user.png'"></el-avatar>
        </div>
        <div class="base-info">
          <div class="info-item">
              <span class="item">昵称：{{ nickname }}</span>
              <span class="item">角色：{{ roles }}</span>
          </div>
          <div class="info-item">
              <span class="item">手机号码：{{ phone }}</span>
              <span class="item">邮箱：{{ email }}</span>
          </div>
        </div>
      </div>
      <div class="use-set">
        <div class="set-item" :class="active == 1 ? 'set-active': ''" @click="active = 1">
          <span class="arco-tabs-tab-title">基本信息</span>
        </div>
        <div class="set-item" :class="active == 2 ? 'set-active': ''" @click="active = 2">
          <span class="arco-tabs-tab-title">信息设置</span>
        </div>
        <div class="set-item" :class="active == 3 ? 'set-active': ''" @click="active = 3">
          <span class="arco-tabs-tab-title">安全设置</span>
        </div>

        <template v-if="active == 1">
          <div class="set-tab">
            <div class="item">账户名：{{ name }}</div>
            <div class="item">用户昵称：{{ nickname }}</div>
            <div class="item">用户角色：{{ roles }}</div>
            <div class="item">手机号码：{{ phone }}</div>
            <div class="item">用户邮箱：{{ email }}</div>
          </div>
        </template>
        <template v-if="active == 2">
          <div class="set-tab">
            <setItem :form="nicknameForm" @changeStatus="changeStatus"></setItem>
            <!-- <setItem :form="phoneForm" @changeStatus="changeStatus"></setItem> -->
            <setItem :form="emailForm" @changeStatus="changeStatus"></setItem>
          </div>
        </template>
        <template v-if="active == 3">
          <div class="set-tab">
            <setItem :form="phoneForm" @changeStatus="changeStatus"></setItem>
            <setItem :form="passwordForm" @changeStatus="changeStatus"></setItem>
          </div>
        </template>
      </div>
    </template>
  </bs-container>
</template>

<script>
import { mapGetters } from 'vuex'
import setItem from './components/setItem.vue'
import UserApi from '@/api/user'
export default {
  components:{
    setItem
  },
  computed: {
    ...mapGetters(['name','roles']),
    content(){
      return this.editStatus ? '保存': '修改'
    },
  },
  mounted(){
    this.phone = this.phoneLook(localStorage.getItem('phone'))
    this.nickname = localStorage.getItem('nickname')
    this.avatar = localStorage.getItem('avatar')
    this.email = localStorage.getItem('email')

  },
  data(){
    return{
      active:2,
      editStatus:false,
      NameValue:'',
      phone:'',
      nickname:'',
      avatar:'',
      email:'',
      nicknameForm:{
        type:'nickname',
        title:'用户昵称',
        placeholder:'请输入用户昵称',
        content:'修改',
        editStatus:false,
        inputValue:'',
        value:localStorage.getItem('nickname'),
        loading:false,
        allowEdit:true
      },
      phoneForm:{
        type:'phone',
        title:'手机号码',
        placeholder:'请输入手机号码',
        content:'修改',
        editStatus:false,
        inputValue:'',
        value:this.phoneLook(localStorage.getItem('phone')),
        loading:false,
        allowEdit:true
      },
      emailForm:{
        type:'email',
        title:'用户邮箱',
        placeholder:'请输入用户邮箱',
        content:'修改',
        editStatus:false,
        inputValue:'',
        value:localStorage.getItem('email'),
        loading:false,
        allowEdit:true
      },
      passwordForm:{
        type:'password',
        title:'登录密码',
        placeholder:'请输入登录密码',
        content:'修改',
        editStatus:false,
        inputValue:'',
        value:'已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。',
        loading:false,
        allowEdit:true
      }

    }
  },
  methods:{
    phoneLook(value){
      const start = value.substring(0, 3)
      const end = value.substring(value.length-4)
      return `${start}****${end}`
    },
    changeStatus(value){
      if(!value.editStatus){
        if(value.type == 'nickname'){
          this.nicknameForm.inputValue = ''
          this.nicknameForm.editStatus = !this.nicknameForm.editStatus
          this.nicknameForm.content = '保存'
        }else if(value.type == 'phone'){
          this.phoneForm.inputValue = ''
          this.phoneForm.editStatus = !this.phoneForm.editStatus
          this.phoneForm.content = '保存'
        }else if(value.type == 'email'){
          this.emailForm.inputValue = ''
          this.emailForm.editStatus = !this.emailForm.editStatus
          this.emailForm.content = '保存'
        }else if(value.type == 'password'){
          this.passwordForm.inputValue = ''
          this.passwordForm.editStatus = !this.emailForm.editStatus
          this.passwordForm.content = '保存'
        }
      }else{
        if(value.type == 'nickname'){
          this.setName()
        }else if(value.type == 'phone'){
          this.setPhone()
        }else if(value.type == 'email'){
          this.setEmail()
        }else if(value.type == 'password'){
          this.setPassword()
        }
      }
    },
    // 修改用户昵称
    async setName(){
      if(!this.nicknameForm.inputValue){
        return this.$message.warning('用户昵称不能设置为空')
      }
      let pattern = /^[A-Za-z\u4e00-\u9fa5]+$/;
      if(!pattern.test(this.nicknameForm.inputValue)){
        return this.$message.warning('用户昵称只支持中英文')
      }
      this.nicknameForm.content = '保存中'
      this.nicknameForm.loading = true
      let params = {
        nickname:this.nicknameForm.inputValue
      }
      await UserApi.updateUserinfo(params)
      this.$store.dispatch('user/getUserInfo').then((res) => {
        if (res) {
          setTimeout(() => {
            this.nicknameForm.value = localStorage.getItem('nickname')
            this.nickname = localStorage.getItem('nickname')
            this.nicknameForm.loading = false
            this.nicknameForm.editStatus = false
            this.nicknameForm.content = '修改'
            this.$message.success('修改成功')
          }, 2000);
        }
      })
    },
    async setPhone(type){
      if(!this.phoneForm.inputValue){
        return this.$message.warning('手机号码不能设置为空')
      }
      // 手机号码格式不正确
      let pattern = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if(!pattern.test(this.phoneForm.inputValue)){
        return this.$message.warning('手机号码格式不正确')
      }
      this.phoneForm.content = '保存中'
      this.phoneForm.loading = true
      let params = {
        phone:this.phoneForm.inputValue
      }
      await UserApi.updateUserinfo(params)
      this.$store.dispatch('user/getUserInfo').then((res) => {
        if (res) {
          setTimeout(() => {
            this.phoneForm.value = this.phoneLook(localStorage.getItem('phone'))
            this.phone = this.phoneLook(localStorage.getItem('phone'))
            this.phoneForm.loading = false
            this.phoneForm.editStatus = false
            this.phoneForm.content = '修改'
            this.$message.success('修改成功')
          }, 2000);
        }
      })
    },
    // 设置邮箱
    async setEmail(){
      if(!this.emailForm.inputValue){
        return this.$message.warning('用户邮箱不能设置为空')
      }
      let pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if(!pattern.test(this.emailForm.inputValue)){
        return this.$message.warning('用户邮箱格式不正确')
      }
      this.emailForm.content = '保存中'
      this.emailForm.loading = true
      let params = {
        email:this.emailForm.inputValue
      }
      await UserApi.updateUserinfo(params)
      this.$store.dispatch('user/getUserInfo').then((res) => {
        if (res) {
          setTimeout(() => {
            this.emailForm.value = localStorage.getItem('email')
            this.email = localStorage.getItem('email')
            this.emailForm.loading = false
            this.emailForm.editStatus = false
            this.emailForm.content = '修改'
            this.$message.success('修改成功')
          }, 2000);
        }
      })
    },
    // 重置密码
    setPassword(){

    }
  }
}
</script>

<style scoped lang="scss">
.use-header{
  width: 100%;
  height:154px;
  background-color: antiquewhite;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.avatar{
  margin-left: 20px;
  margin-right: 20px;
}
.base-info{
  min-width: 1100px;
}
.info-item{
  margin-top: 10px;
  margin-bottom: 10px;
  .item{
    display: inline-block;
    width: 350px;
    font-size: 14px;
    font-weight: 400;
    color:rgb(78,89,105)
  }
}


.use-set{
  margin-top: 30px;
  /* border-top:1px solid #899898; */
}
.set-item{
  line-height: 1.5715;
  cursor: pointer;
  transition: color .2s cubic-bezier(0,0,1,1);
  display: inline-block;
  margin: 6px;
  padding: 5px 16px;
  font-size: 14px;
  background-color: transparent;
  border-radius: 32px;
  background-color: rgb(242,243,245);
}
.set-active {
  color:rgb(22,93,255)!important;

}

.set-tab{
  padding: 10px 20px;
  box-sizing: border-box;
  min-width:900px;
  width: 100%;
  font-size: 14px;
  line-height: 50px;
  color:rgb(78,89,105);


    .item-detail{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      // margin: 6px 10px;
      .detail-i{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        line-height: 50px;
        border-bottom: 1px solid rgb(229,230,235);

      }
      .edit{
        color: rgb(22,93,255);
        cursor: pointer;
      }
    }

}

::v-deep .detail-i .el-input input{
  border:none;
  padding:0;
  font-size: 14px;
}
</style>
